<template>
  <div>
    御剑乘风来,除魔天地间!
    <hr />
    <button @click="add">添加</button>
    <MyTable :list="$store.state.list">
      <template #look="{ obj }">
        {{ obj.id }}
        <button @click="lookHandel(obj)">编辑</button>
        <button @click="del(obj.id)">删除</button>
      </template>
    </MyTable>

    <DiaLog title="模态框" :showFlag="showFlag">
      <template>
        书名: <input type="text" v-model="fromData.bookname" /> <br />
        作者: <input type="text" v-model="fromData.author" /> <br />
        出版社: <input type="text" v-model="fromData.publisher" /> <br />
        <button @click="submit">确认</button>
        <button @click="gb">取消</button>
      </template>
    </DiaLog>
  </div>
</template>
<script>
import MyTable from './components/MyTable.vue'
import DiaLog from './components/Dialog.vue'
import axios from 'axios'
export default {
  name: 'app',
  components: {
    MyTable,
    DiaLog
  },
  data () {
    return {
      showFlag: false,
      fromData: {
        bookname: '',
        author: '',
        publisher: '',
        id: ''
      },
      list: [

      ],
    }
  },

  created () {
    console.log(this)
    this.$store.dispatch('getList')

  },
  computed: {
  },
  methods: {
    del (id) {
      this.$store.dispatch('del', id)
    },
    submit () {
      if (this.fromData.id != '') {

        const data = this.fromData
        this.$store.dispatch('qd', data)
        //清空
        this.fromData = {
          bookname: '',
          author: '',
          publisher: '',
          id: ''
        }

      } else {
        const data = this.fromData
        this.$store.dispatch('add', data)
        this.fromData = {
          bookname: '',
          author: '',
          publisher: '',
          id: ''
        }
      }
      //关闭模态框
      this.showFlag = false
    },
    //点击编辑表单获取到相应数据
    lookHandel (obj) {
      this.showFlag = true
      //深拷贝下
      this.fromData = JSON.parse(JSON.stringify(obj))

    },

    //关闭姆态框
    gb () {
      this.showFlag = false
      //这里清空是为了下次点击添加的时候判断  时候有id值
      this.fromData = {
        bookname: '',
        author: '',
        publisher: '',
        id: ''
      }
    },

    add () {
      this.showFlag = true

    }
  }
}
</script>
<style lang='less'  scoped>
</style>
